<template lang="pug">
  .pageModelItem
    ul
      .pageModelItem-con
        span(v-show='toggleId !== item.propertyId',@click='handleTogglePropertyId(item.propertyId)') {{item.propertyName}}
        Input(v-show='toggleId === item.propertyId',v-model='item.propertyName')
        Icon(:type="item.groupType === 0 ? 'md-document' : 'md-menu'")
        Select(v-model='item.parseType')
          Option(v-for="(item, index) in httpCon",:value='item.itemType',:key="index") {{item.itemName}}
        Input(v-model='item.matchExpression',placeholder='页面模型')
        Input(v-model='item.jsonPath',placeholder='jsonPath')
        Input(v-model='item.regex',placeholder='正则表达式')
        span URL属性：
        RadioGroup(v-model='item.urlPropertyExtract')
          Radio(:label='1') 是
          Radio(:label='0') 否
        Button(type='error',@click.stop='$emit("removeItem")') 删除
    ul(v-if='isFolder')
      pageModelItem(v-for='(item,index) in item.children',:item='item',:httpCon='httpCon',@removeItem='handleDeleteIemChildren(index)',:key='index')
</template>

<script>
export default {
  name: 'PageModelItem',
  props: { item: Object, httpCon: [Object, Array] },
  data() {
    return {
      toggleId: ''
    }
  },
  computed: {
    isFolder() {
      return this.item.children && this.item.children.length
    }
  },
  mounted() {
    document.addEventListener('click', e => {
      if (!this.$el.contains(e.target)) {
        this.toggleId = '-1'
      }
    })
  },
  methods: {
    handleDeleteIemChildren(index) {
      this.item.children.splice(index, 1)
    },
    handleTogglePropertyId(id) {
      this.toggleId = id
    }
  }
}
</script>

